<!doctype html>
<html lang="en" data-bs-theme="auto" xmlns:th="http://www.thymeleaf.org">
<th:block th:insert="~{fragments/nav :: head(#{device_list})}"></th:block>
<body>
<th:block th:insert="~{fragments/nav :: search}"></th:block>
<div class="container-fluid">
  <div class="row">
   <th:block th:insert="~{fragments/nav :: menu}"></th:block>
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
	  <th:block th:insert="~{fragments/nav :: breadcrumb}"></th:block>
	  <div class="d-flex align-items-center">
	      <h2 class="me-2" th:text="#{device_list}">Device list</h2>
	      <a class="icon-link mb-1" href="javascript:void(0);" onclick="showCreateItemModal()" rel="noopener">
			  <i class="bi bi-arrow-right"></i>
	          <span th:text="#{new}">new</span>
	      </a>
	  </div>
      <div class="table-responsive small">
        <table class="table table-striped table-sm" id="device-body">
        </table>
      </div>
    </main>
   <th:block th:insert="~{fragments/nav :: modalError}"></th:block>
   <th:block th:insert="~{fragments/nav :: modalConfirm}"></th:block>
   <th:block th:insert="~{fragments/nav :: modalCreateItem}"></th:block>
  </div>
</div>

<th:block th:insert="~{fragments/nav :: scriptFunctions}"></th:block>
<script th:inline="javascript">
	
const colorStatus = {column: 'colorStatus',colors: [{value: 1,color:'yellow'},{value: 2,color:'#00FF00'}]};
const actionView = { operate: '/dc/web/deviceview?deviceId=', icon: 'bi-eye', space: 'me-2', help: [[#{view_module_tb_device_comments}]] };
const actionSim = { newWindow: 1, operate: '/dc/web/devicesim?deviceId=', icon: 'bi-sim', space: 'me-2', help: [[#{view_module_device_sim}]] };
const actionViewDeviceLog = { newWindow: 1, operate: '/dc/web/devicecloudlog?deviceId=', icon: 'bi-journal', space: 'me-2', help: [[#{view_log_tb_device_comments}]] };
const actionDel = { confirmTitle: [[#{delete_device_tb_device_confirm}]] , confirmDescription:  [[#{action_device_delete}]], operate: '/dc/web/devicelistrefresh?action=deviceDel&deviceId=', icon: 'bi-trash', isAjax: 'normal', help: [[#{delete_device_tb_device_comments}]]};

const columns = [
    { column: 'id', name: 'ID', width: '1%', isId: 1, help: [[#{id_tb_device_comments}]],isHidden: 1},
	{ column: 'ownerShip', name: [[#{ownership_tb_device}]], width: '10%', help: [[#{ownership_tb_comments}]] },
    { column: 'deviceNo', name: [[#{device_tb_device}]], width: '10%', help: [[#{device_tb_comments}]] },
	{ column: 'firmwareVersion', name: [[#{version_tb_device}]], width: '10%', help: [[#{version_tb_comments}]] },
    { column: 'deviceName', name: [[#{name_tb_device}]], width: '10%', editable:[], fieldType: 'string',updateAction:'/dc/web/devicelistrefresh?action=deviceUpdate&deviceId=', help: [[#{name_tb_comments}]] },
    { column: 'imei', name: [[#{imei_tb_device}]], width: '10%', help: [[#{imei_tb_comments}]] },
    { column: 'iccid', name: [[#{iccid_tb_device}]], width: '10%', help: [[#{iccid_tb_comments}]] },
    { column: 'uploadTime', name: [[#{upload_tb_device}]], width: '10%', help: [[#{upload_tb_comments}]] },
    { column: 'deviceStatus', name: [[#{status_tb_device}]], color: colorStatus, width: '10%', help: [[#{status_tb_comments}]] },
    { name: [[#{action_tb_device}]], width: '10%', isAction: 1, actions: [actionView,actionViewDeviceLog,actionSim,actionDel]},
];

const tableInput=[{tableData: 'deviceList', tableBody: 'device-body', tableColumns: columns}];
excAction('/dc/web/devicelistrefresh',null,tableInput,null,true);

function showCreateItemModal() {
	const modalId=document.getElementById('createItemModal');
	let createItemModal = bootstrap.Modal.getInstance(modalId);
	if (!createItemModal) 
		createItemModal = new bootstrap.Modal(modalId);
    modalId.querySelector('.modal-title').textContent=[[#{action_device_add_title}]];
	const fieldDivs = document.querySelectorAll(".field"); 
	fieldDivs.forEach(function(div) {
		div.classList.add('d-none');
	});

	fieldDivs[0].classList.remove('d-none');
	fieldDivs[0].querySelectorAll(".form-label")[0].textContent =[[#{action_device_add_device_no}]]; 
	fieldDivs[0].querySelectorAll(".form-control")[0].value='';
	fieldDivs[0].querySelectorAll(".form-control")[0].placeholder=[[#{action_device_add_device_no_enter}]];

	fieldDivs[1].classList.remove('d-none');
	fieldDivs[1].querySelectorAll(".form-label")[0].textContent =[[#{action_device_add_device_token}]]; 
	fieldDivs[1].querySelectorAll(".form-control")[0].value='';
	fieldDivs[1].querySelectorAll(".form-control")[0].placeholder=[[#{action_device_add_device_token_enter}]];
	
	const confirmButton = modalId.querySelector('.submit');
	confirmButton.addEventListener('click', function() {
		const deviceNo=fieldDivs[0].querySelectorAll(".form-control")[0].value;
		const deviceToken=fieldDivs[1].querySelectorAll(".form-control")[0].value;
		const jsonSend = {
			deviceNo: deviceNo,
			deviceToken: deviceToken
		   };
		createItemModal.hide();
		excAction("/dc/web/devicelistrefresh?action=deviceAdd",jsonSend,tableInput,null,true);		
	}, { once: true });
	createItemModal.show();
}

// Tooltip initialization
//const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
//const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

// 等待页面完全加载后初始化 Tooltip
document.addEventListener('DOMContentLoaded', function () {
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  tooltipTriggerList.forEach(tooltipTriggerEl => {
    new bootstrap.Tooltip(tooltipTriggerEl);
  });
});


</script>
</body>
</html>
